<template>
  <div class="message-frame" :class="{'message-right':this.type,'border-color':this.type}">
    <div>{{this.name}}--{{this.time}}</div>
    <div>
      {{this.content}}
    </div>
  </div>
</template>

<script>
export default {
  name: "Message",
  props: ["name", "time", "content", "type"]
}
</script>

<style scoped>
.message-frame {
  width: 75%;
  height: 100%;
  /* border: 1px solid #000000; */
  margin: 2%;
  padding: 2%;
  float: left;
  word-wrap: break-word;
  overflow: hidden;
  background-color: rgb(229,229,229);
  border-radius: 10px;
  /* position: relative; */
}

.message-right {
  float: right;
}

.border-color {
  /* border-color: red; */
  background-color: rgb(18,193,245);
  color: #FFFFFF;
}
</style>
